$(function() {
	/*
	// $.fn jQuery所有的方法都在这
	// 开发jQuery插件
	$.fn.bgchange = function (bg) {
		// console.log(this) // this是jQuery对象
		// console.log(bg)
		this.css("background-color", bg)
	}
	// console.log($.fn)
	$("h1").bgchange("red")
	*/
	
	/*
	$.ajax({
		url: "",
		success(res) {
			console.log(res)
			myBanner({
				ele: "#banner1", 
				activeIndex: 1,
				data: res
			})
		}
	})*/
	
	// $(".active").css({})
	// $("#banner1").myBanner({})
	// $.myBanner({})
	
	// js插件，写了一个函数
	/*myBanner({
		ele: "#banner1", 
		activeIndex: 1,
		data: [
			{ id: 1, img: 'images/pic1.png', link: '' },
			{ id: 2, img: 'images/pic2.webp', link: '' },
			{ id: 3, img: 'images/pic3.webp', link: '' },
			{ id: 4, img: 'images/pic4.webp', link: '' },
		]
	})
	
	myBanner({
		ele: "#banner2",
		timeout: 5000,
		data: [
			{ id: 2, img: 'images/pic2.webp', link: '' },
			{ id: 3, img: 'images/pic3.webp', link: '' },
			{ id: 1, img: 'images/pic1.png', link: '' },
			{ id: 2, img: 'images/pic2.webp', link: '' },
			{ id: 3, img: 'images/pic3.webp', link: '' },
			{ id: 4, img: 'images/pic4.webp', link: '' },
		]
	})*/
	
	$.fn.myBanner = function myBanner(options) {
		// const ele = options.ele
		const ele = this
		const timeout = options.timeout || 2000
		let activeIndex = options.activeIndex || 0
		let data = options.data || []
		
		const $ele = $(ele)
		// console.log($ele)
		// let activeIndex = 0
		// 初始化
		// 如果声明变量时不用const，let，var 变量会在第一次调用后变成全局变量
		// 动态创建图片
		$ele.append(`<div class="images-wrapper"></div>`)
		$.each(data, function(index, item) {
			$ele.find(".images-wrapper").append(`
				<a href="javascript:void(0)">
				    <img src="${item.img}" alt="">
				</a>
			`)
		})
		
		const $bannerItem = $ele.find(".images-wrapper a")
		
		// 生成按钮
		$ele.append(`
			<a href="javascript:void(0)" class="btn prev"></a>
			<a href="javascript:void(0)" class="btn next"></a>
		`)
		
		// 生成指示点
		$ele.append("<div class='dots'></div>")
		$bannerItem.each(function() {
			$ele.find(".dots").append("<i></i>")
		})
		
		const $dots = $ele.find(".dots i")
		$bannerItem.eq(activeIndex).show()
		$dots.eq(activeIndex).addClass("active")
		
		// 播放
		let bannerTimer = setInterval(function() {
			activeIndex++
			if (activeIndex >= $bannerItem.length) {
				activeIndex = 0
			}
			
			$bannerItem.eq(activeIndex).show().siblings().hide()
			$dots.eq(activeIndex).addClass("active").siblings().removeClass("active")
		}, timeout)
		
		// 暂停与播放
		$ele.hover(function() {
			clearInterval(bannerTimer)
		}, function() {
			setInterval(function() {
				activeIndex++
				if (activeIndex >= $bannerItem.length) {
					activeIndex = 0
				}
				
				$bannerItem.eq(activeIndex).show().siblings().hide()
				$dots.eq(activeIndex).addClass("active").siblings().removeClass("active")
			}, timeout)
		})
	}
	
	$("#banner1").myBanner({
		timeout: 5000,
		activeIndex: 3,
		data: [
			{ id: 2, img: 'images/pic2.webp', link: '' },
			{ id: 3, img: 'images/pic3.webp', link: '' },
			{ id: 1, img: 'images/pic1.png', link: '' },
			{ id: 2, img: 'images/pic2.webp', link: '' },
			{ id: 3, img: 'images/pic3.webp', link: '' },
			{ id: 4, img: 'images/pic4.webp', link: '' },
		]
	})
	
	$("#banner2").myBanner({
		// timeout: 5000,
		data: [
			{ id: 1, img: 'images/pic1.png', link: '' },
			{ id: 2, img: 'images/pic2.webp', link: '' },
			{ id: 3, img: 'images/pic3.webp', link: '' },
		]
	})
	
})